<template>
  <div id="release">
    <el-row>
      <el-col :span="18"
              :offset="2">
        <div class="grid-content bg-white">
          <div class="top_box bg-blue">
            <div class="title_box">
              <span class="title_style">Haring knowledge</span>
            </div>
            <div class="guide_box">
              <span class="guide_style">好东西当然要一起</span>
              <span class="guide_style">分享啦~</span>
            </div>
            <div class="image_box">
              <img src="~@/assets/release/image1.png" />
            </div>
          </div>
          <div class="cell"></div>

          <div class="operate_box">
            <el-form :model="state.form" :rules="state.rules" ref="ruleForm" label-width="100px" >
              <div v-if="state.types == 0">
                <div class="time_box">
                <span class="time_style fn13">
                  是否同步到大厅：
                </span>
                </div>
                <div class="time_radio">
                  <el-radio-group v-model="state.form.is_hall">
                    <el-radio  :label="1">是</el-radio>
                    <el-radio  :label="0">否</el-radio>
                  </el-radio-group>
                </div>
              </div>
            <div class="title1_box">
              <span class="title1_style fn13">
                任务标题
              </span>
            </div>
            <div class="title_input">
              <el-input v-model="state.form.title"
                        :rows="1"
                        type="textarea"
                        placeholder="请简短的输入任务标题" />
            </div>
            <div class="content_box">
              <span class="content_style fn13">
                任务简介
              </span>
            </div>
            <div class="content_input">
              <el-input v-model="state.form.synopsis"
                        :rows="2"
                        type="textarea"
                        placeholder="请简短的输入任务简介" />
            </div>
            <div class="data_box">
              <span class="data_style fn13">
                参考资料
              </span>
            </div>
            <div class="upload_box">
                  <upload-file ref="uploadFile" :limit="2"></upload-file>
            </div>
            <div v-if="state.form.is_hall!=1">
              <div class="title1_box">
                <span class="title1_style fn13">
                  选择所属类型
                </span>
              </div>
              <div class="group_box dfix">
                <el-radio-group v-model="state.form.task_type" size="small">
                  <div class="redio-maright">
                    <el-radio-button label="1" border>基础知识</el-radio-button>
                  </div>
                  <div class="redio-maright">
                    <el-radio-button label="2" border>实战经历</el-radio-button>
                  </div>
                  <div class="redio-maright">
                    <el-radio-button label="3" border>知识扩展</el-radio-button>
                  </div>
                </el-radio-group>
              </div>
            </div>
            <div class="type_box">
              <span class="type_style fn13">
                奖励方式
              </span>
            </div>
            <div class="type_select">
              <el-radio-group v-model="state.form.type" size="mini">
                <el-radio-button label="1">现金</el-radio-button>
                <el-radio-button label="2">积分</el-radio-button>
              </el-radio-group>
            </div>
            <div class="type_input">
              <el-form-item>
                <el-input size="small" type="number" v-if="state.form.type==1" style="width: 468px;" v-model="state.form.money" placeholder="请输入现金"></el-input>
                <el-input size="small" type="number" v-if="state.form.type==2" style="width: 468px;" v-model="state.form.integral" placeholder="请输入积分"></el-input>
              </el-form-item>
            </div>
          <div v-if="state.form.is_hall!=1">
            <div class="time_box">
              <span class="time_style fn13">
                是否限定时间：
              </span>
              <span class="time_style1 fn12">
                任务时间到期后自动结束，不能再领取以及提交任务
              </span>
            </div>
            <div class="time_radio">
              <el-radio-group v-model="state.form.is_end">
                <el-radio  :label="1">是</el-radio>
                <el-radio  :label="0">否</el-radio>
              </el-radio-group>
            </div>

            <div class="tree" v-if="state.form.is_end === 1">
              <el-date-picker v-model="state.form.end_time" type="datetime" placeholder="选择结束时间"></el-date-picker>
            </div>
          </div>
          <div v-if="state.form.is_hall!=1">
            <div class="time_box">
              <span class="time_style fn13">
                是否限定人数：
              </span>
              <span class="time_style1 fn12">
                限定可领取的人数
              </span>
            </div>
            <div class="time_input">
              <el-input v-model="state.form.peoples"
                        :rows="1"
                        type="textarea"
                        placeholder="人数限制： 0" />
            </div>
          </div>

            <div v-if="state.form.is_hall != 1">
              <div class="title1_box">
                <span class="title1_style fn13">
                  单独设定人员【勾选者可见】
                </span>
              </div>
              <div class="radio_box">
                <el-tree
                        :data="state.selectData"
                        show-checkbox
                        node-key="id"
                        :default-expanded-keys="state.defaultExpandedKeys"
                        :default-checked-keys="state.defaultExpandedKeys"
                        ref="tree"
                        :collapse-tags="true"
                >
                </el-tree>
              </div>
            </div>
            <div class="title1_box">
              <span class="title1_style fn13">
                任务详情
              </span>
            </div>
            <div style="width: 500px;margin-left: 63px;margin-top: 30px;margin-bottom: 20px;">
              <vue-ueditor-wrap v-model="state.form.data" :config="editorConfig" editor-id="editor-demo-02"></vue-ueditor-wrap>
            </div>


          </el-form>
            <div class="cell1_box"></div>
            <div class="submit_box" @click="addRelea">
              <el-button class="submit_style" v-if="state.types == 0">发布</el-button>
              <el-button class="submit_style" v-if="state.types == 1">同步</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCurrentInstance, ref ,reactive, onMounted} from "vue";
import { useRouter } from 'vue-router'
import { getDepartment, postaddTask, taskDetail, editTask } from "@/request/api";
import uploadFile from '@/components/uploadFile/uploadFile'

const state = reactive({
  checkboxGroup1: [],
  bmdata: [],
  defaultExpandedKeys: [],
  defaultCheckedKeys: [],
  selectData: [],
  id: 0,
  types: 0,
  form: {
    status: '',
    title : '',
    data : '',
    integral:'0',
    money : '0.00',
    task_type: 0,
    type: 0,
    about_file:'',
    synopsis: '',
    user_arr: [],
    ktype: 0,
    department: [],
    is_end: 0,
    peoples: 0,
    end_time: '',
    is_hall: 0
  },
  list_key: '',
  rules:{
    title: [
      { required: true, message: '请输入任务标题', trigger: 'blur' }
    ],
    data: [
      { required: true, message: '请输入任务详情', trigger: 'blur' }
    ],
    synopsis: [
      { required: true, message: '请输入任务简介', trigger: 'blur' }
    ]
  }
})
export default {
  components: {uploadFile},
  data: () => ({}),
  created () {
    this.editorConfig = {
      UEDITOR_HOME_URL: '/UEditor/',
      // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
      serverUrl: 'https://inter.huanxingbi.cn/ueditor/php/controller.php',
      toolbars: [[
        'justifyjustify', 'undo', 'bold', '|', 'simpleupload', 'forecolor', 'justifycenter',
        'justifyleft', 'horizontal', 'indent', 'fontsize', 'fontfamily'
      ]]
    }
  },
  setup (props,{emit}) {
    const radio2 = ref("");
    const radio3 = ref("");
    const {ctx,proxy} = getCurrentInstance();
    const router = useRouter()
    state.id = router.currentRoute.value.query.id;
    if(typeof(proxy.$root.$route.query.types)!='undefined') {
      state.types = proxy.$root.$route.query.types
    }
    //获取部门
    const init = () => {
      let param = {
          pageSize: 100
      }
      getDepartment(param).then(res => {
          state.bmdata = res.data.data
          state.selectData   = res.data.list
      })
      state.form = {}
      //获取详情
      if(state.id > 0){
          initDetail()
      }
    }
    //发布
    const addRelea = () => {
      let id = 0;
      proxy.$refs.ruleForm.validate((valid) => {
        if (valid) {
           if(!state.form.title){
             proxy.$message.error('请填写标题')
             return false
           }
          if(!state.form.data){
            proxy.$message.error('请输入任务详情')
            return false
          }

          if(typeof(proxy.$refs.uploadFile.$refs.uploadRef.uploadFiles[0])!='undefined'){
              let files = ''
              let arrfile = proxy.$refs.uploadFile.$refs.uploadRef.uploadFiles
              for (let i = 0;i < arrfile.length;i++){
                  files += (i >0 ? ',' : '') +  arrfile[i].response.data.attc_id
              }
              state.form.about_file = files
          }else{
              state.form.about_file = ''
          }

          if(!state.form.synopsis){
            proxy.$message.error('请输入任务简介')
            return false
          }

          if(state.form.is_hall > 0){
              state.form.task_type = 0
          }else{
            if(!state.form.task_type){
              proxy.$message.error('请选类型')
              return false
            }
          }
          let bmdata = ''
          if(state.form.is_hall!=1) {
            let detree = proxy.$refs.tree.getCheckedKeys();
            if (detree.length > 0) {
                bmdata = userArr(detree);
            }
          }
          state.form.user_arr = bmdata;
          if( state.form.type==1){
            state.form.integral = '0'
          }else if(state.form.type==2){
            state.form.money = '0.00'
          }
          if (state.form.is_end === 1) {
            if (!state.form.end_time) {
              proxy.$message.error('开启了时间限制，必须选择时间')
              return false
            }

          }
          let path = 'user-List-16'
          if(state.form.is_hall==1) {
             path = 'user-task-16';
          }

          if(state.types == 1){
              //同步
              proxy.$message.error('同步失败')
              return false
          }else {
            if (state.id > 0) {
              state.form.task_id = state.id
              editTask(state.form).then(res => {
                if (res.ret == 200) {
                  proxy.$message.success('修改成功！')
                  setTimeout(function () {
                    router.push({name: path});
                  }, 1000)
                } else {
                  proxy.$message.error(res.msg)
                }
              })
            } else {

              postaddTask(state.form).then(res => {
                if (res.ret == 200) {
                  proxy.$message.success('发布任务成功！')
                  setTimeout(function () {
                    router.push({name: path});
                  }, 1000)
                } else {
                  proxy.$message.error(res.msg)
                }
              })
            }
          }
        } else {
          proxy.$message.error('请先填写表单信息！')
          return false;
        }
      });
    }
    const userArr = (data) => {
      let arr = []
      for (let i = 0;data.length > i;i++){
        if(data[i] > 0){
          arr.push(data[i]);
        }
      }
      return arr.join(',');
    }
    const count = ref(1);
    onMounted(async () => {
      init();
    })
    const initDetail = () => {
      let param = {
        task_id: state.id
      }
      //获取详情
      taskDetail(param).then(res => {
        state.form = res.data

        if(res.data.user_arr!='*') {
            let str = res.data.user_arr.substr(0, res.data.user_arr.length - 1);
            state.defaultExpandedKeys = str.split(',')
        }
        if(res.data.department!=''){
             let str1 = res.data.department.substr(0, res.data.department.length - 1);
             state.list_key = str1.split(',')
        }
        if( state.types == 1){
            state.form.is_hall = 0
        }
      })
    }
    return {
      title: ref(""),
      content: ref(""),
      radio1: ref('现金'),
      state,
      radio2,
      radio3,
      props,
      count,
      addRelea,
      userArr
    };
  }
};
</script>

<style lang="scss" scoped>
img {
  width: 100% !important;
}
.grid-content {
  min-height: 1208px;
  border-radius: 25px;
}
.bg-white {
  background-color: #ffffff;
}
.title1_style{
  font-size: 13px;
}
.top_box {
  height: 220px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  position: relative;
}
.bg-blue {
  background-image: linear-gradient(#ffffff, #d0e3fe);
}
.title_box {
  position: absolute;
  top: 22px;
  left: 63px;
  height: 36px;
  .title_style {
    font-size: 34px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #4e72fc;
    line-height: 100px;
  }
}
.guide_box {
  position: absolute;
  top: 103px;
  left: 63px;
  height: 17px;
  .guide_style {
    font-size: 18px;
    font-family: Microsoft YaHei;
    color: #7a8499;
    font-weight: 400;
  }
}
.image_box {
  position: absolute;
  bottom: 0;
  right: 33px;
}
.cell {
  margin-top: 3px;
  height: 5px;
  background-color: #e2e9f7;
}
.operate_box {
  min-height: 980px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  .title1_box {
    margin-left: 63px;
    margin-top: 30px;
    height: 17px;
    .title_style {
      font-size: 27px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #2b2d33;
      line-height: 100px;
    }
  }
  .title_input {
    margin-left: 63px;
    margin-top: 20px;
    width: 80%;
  }
  .content_box {
    margin-top: 60px;
    margin-left: 63px;
  }
  .content_input {
    margin-top: 20px;
    margin-left: 63px;
    width: 80%;
  }
  .data_box {
    margin-top: 60px;
    margin-left: 63px;
  }
  .upload_box {
    margin-left: 63px;
    margin-top: 10px;
  }
  .group_box {
    margin-top: 30px;
    margin-left: 63px;
    display: flex;
    .group {
      width: 120px;
      height: 52px;
      display: flex;
      background-color: #f0f2f5;
      color: #858688;
      align-items: center;
      border-radius: 26px;
      padding-left: 42px;
      margin-right: 55px;
    }
    .group1 {
      background-color: #f4f1fd;
    }
    .group2 {
      background-color: #f4ebf6;
    }
    .group3 {
      background-color: #eef5fe;
    }
  }
  .type_box {
    margin-top: 30px;
    margin-left: 63px;
    .type_style {
    }
  }
  .type_select {
    margin-top: 20px;
    margin-left: 63px;
    display: flex;
    .demo_button {
      width: 23%;
      .demo_style {
        height: 45px;
        background-color: #f0f2f5;
        color: #858688;
        border-radius: 10px;
      }
      .demo_style1 {
        background-color: #e8efff;
        color: #6192ff;
      }
    }
  }
  .type_input {
    margin-top: 30px;
    margin-left: -36px;
    width: 55%;
  }
  .time_box {
    margin-top: 40px;
    margin-left: 63px;
    .time_style1 {
      color: red;
    }
  }
  .time_radio {
    margin-top: 10px;
    margin-left: 63px;
  }
  .time_input {
    margin-top: 30px;
    margin-left: 63px;
  }
  .department_box {
    width: 80%;
    margin-left: 15%;
    margin-top: 30px;
    margin-bottom: 60px;
    .top {
      display: flex;
      flex-wrap: wrap;
    }
    .bottom {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
    }
    .demo_button {
      width: 25%;
      .demo_style {
        height: 45px;
        background-color: #f0f2f5;
        color: #858688;
        border-radius: 10px;
      }
      .demo_style1 {
        background-color: #e8efff;
        color: #6192ff;
      }
    }
  }
}

.cell1_box {
  width: 95%;
  height: 1px;
  background-color: #e3e9f7;
  margin-left: 2.5%;
}
.submit_box {
  margin-left: 47%;
  margin-top: 40px;
  padding-bottom: 50px;
  .submit_style {
    width: 80px;
    height: 32px;
    background: #6c91ed;
    box-shadow: 0px 2px 6px 0px rgba(110, 132, 179, 0.2);
    border-radius: 8px;
    color: #ffffff;
  }
}
  .dfix {
    display: flex;
  }
  .redio-maright {
    display: inline-block;
    margin-right: 30px;

  }
.el-radio-button__inner {
  background: #d0e3fe !important;
}
  .tree {
    margin-left: 63px;
    margin-top: 20px;
  }
  .img-se1 {
    padding-top: 25px;
  }
  .radio_box {
    margin-left: 55px;
    margin-top: 20px;
  }
  .fn13 {
    font-size: 13px;
  }
  .fn12 {
    font-size: 12px;
  }
.el-tree {
  position: relative;
  cursor: default;
  background: #FFFFFF;
  color: #606266;
  display: flex;
}
</style>
